<template>
	<view class="scan-result">
		<view class="title">{{ projectDate+projectName }}</view>
		<view class="scan-cont">
			<view class="avater">
				<view class="single-fl">
					<view class="img"><img :src="om.getAvatar()" /></view>
				</view>
				<view class="single-fr name">{{ userName }}</view>
			</view>
			<view class="single">
				<view class="single-fl">公司</view>
				<view class="single-fr">{{ orgName }}</view>
			</view>
			<view class="single3" v-show="remark">{{ remark }}</view>
			<view class="single">
				<view class="single-fl">培训地点</view>
				<view class="single-fr">{{ place }}</view>
			</view>
			<view class="single2">
				<view class="single-fl">
					<view class="num">{{ signInNum }}</view>
					<view class="desc">签到人数</view>
				</view>
				<view class="single-fr">
					<view class="cont">
						<view class="subcont">
							<view class="desc">签到开始时间：</view>
							<view class="time">{{ startDate }}</view>
						</view>
						<view class="subcont">
							<view class="desc">签到结束时间：</view>
							<view class="time">{{ endDate }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="single">
				<view class="single-fl">签到凭证</view>
				<view class="single-fr">{{ userMobile }}</view>
			</view>
			<view class="single">
				<view class="single-fl">签到时间</view>
				<view class="single-fr">{{ userSignInDate }}</view>
			</view>
			<view class="single">
				<view class="single-fl">签到状态</view>
				<view class="single-fr">{{ signState }}</view>
			</view>
		</view>
		<view class="btn om-btn-color" @click="signHandle" v-show="!signInFlag">签到</view>
		<view class="status" v-show="signInFlag">{{ signState ? '已签到' : '已过期' }}</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'pinia';
	import {
		useLoginUserStore
	} from '@/stores/login-user.js';
	export default {
		data(){
			return {
				busCode: '',
				formId: '',
				scanResult: {},
				projectDate: '',
				projectName: '',
				orgName: '',
				place: '',
				remark: '',
				signInNum: 0,
				startDate: '',
				endDate: '',
				userName: '',
				userMobile: '',
				userSignInDate: '',
				signState: '',
				signInFlag: true
			}
		},
		computed: {
			...mapState(useLoginUserStore, ['userId','avatar']),
		},
		methods: {
			getSignInViewData(){
				let _that = this
				_that.om.request('commonForm/getSignInViewData', {
					businessFormCode: _that.busCode,
					formId: _that.formId,
					userId: _that.userId
				}).then(res => {
					if(res.succeed == true){
						let data = res.value
						let md = new Date(data.projectDate); 
						let mdm = (md.getMonth()+1) < 10 ? ('0' + (md.getMonth()+1)) : (md.getMonth()+1)
						let mdd = md.getDate() < 10 ? ('0' + md.getDate()) : md.getDate()
						_that.projectDate = mdm + mdd
						_that.projectName = data.projectName
						_that.orgName = data.orgName
						_that.place = data.place
						_that.remark = data.remark
						_that.signInNum = data.signInNum
						_that.startDate = data.startDate
						_that.endDate = data.endDate
						_that.userName = data.userName
						_that.userMobile = data.userMobile
						_that.userSignInDate = data.userSignInDate
						_that.signState = data.signState
						_that.signInFlag = data.signInFlag
					}else{
						_that.om.toast(res.msg)
					}
				})
			},
			signHandle(){
				let _that = this
				let obj = _that.scanResult
				obj.userId = _that.userId
				obj.date = new Date().getTime()
				obj.signDate = new Date().getTime()
				_that.om.request(obj.url.substring(1,obj.url.length-3), obj, 'post').then(res => {
					if(res.succeed == true){
						_that.om.toast(res.value)
						_that.getSignInViewData()
					}else{
						_that.om.toast(res.msg)
					}
				})
			},
			
		},
		onShow() {
			let _that = this;
			uni.getStorage({
				key: 'scanCodeResultCache',
				success: function(res) {
					let data = JSON.parse(res.data)
					_that.formId = data.formId
					_that.busCode = data.businessFormCode
					_that.scanResult = data
					_that.getSignInViewData()
					uni.removeStorage({
						key:'scanCodeResultCache'
					})
				}
			})
		}
	}
</script>

<style lang="less" scoped>
	.scan-result{
		position: relative;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		.scan-cont{
			overflow: auto;
			margin: 45px 0 100px;
		}
		.single-fl{
			float: left;
			width: 25%;
		}
		.single-fr{
			float: left;
			width: 75%;
		}
		.title{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 9;
			background: #FFF;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			height: 44px;
			line-height: 44px;
			border-bottom: 1px solid #c8c7cc;
		}
		.avater{
			overflow: hidden;
			line-height: 66px;
			border-bottom: 1px solid #c8c7cc;
			background: #FFF;
			.img{
				width: 46px;
				height: 46px;
				border-radius: 46px;
				margin: 10px auto;
				img{
					width: 46px;
					height: 46px;
					border-radius: 23px;
				}
			}
			.name{
				padding-left: 20px;
			}
		}
		.single{
			position: relative;
			overflow: hidden;
			border-bottom: 1px solid #c8c7cc;
			height: 32px;
			line-height: 32px;
			background: #FFF;
			.single-fl{
				text-align: right;
				padding-right: 10px;
			}
			.single-fr{
				padding-left: 20px;
			}
		}
		.single2{
			position: relative;
			overflow: hidden;
			border-bottom: 1px solid #c8c7cc;
			height: 93px;
			background: #FFF;
			.single-fl{
				height: 93px;
				border-right: 1px solid #c8c7cc;
				text-align: center;
				.num{
					color: #BF4039;
					font-size: 30px;
					padding-top: 16px;
				}
			}
			.single-fr{
				.cont{
					.subcont{
						height: 46px;
						border-bottom: 1px solid #c8c7cc;
						padding-left: 20px;
						background: url("@/static/images/others/datetime.png") no-repeat;
						background-size: 16px 16px;
						background-position: 20px 7px;
						.desc{
							padding-left: 20px;
							padding-top: 5px;
						}
						.time{
							padding-left: 20px;
							font-weight: bold;
							font-size: 16px;
						}
					}
					.subcont:nth-last-child(1){
						border-bottom: 0;
					}
				}
			}
		}
		.single3{
			padding: 0 20px;
			line-height: 32px;
			border-bottom: 1px solid #c8c7cc;
			background: #FFF;
		}
		.btn{
			color: #FFF;
			width: 64px;
			height: 64px;
			line-height: 64px;
			text-align: center;
			color: #FFF;
			border-radius: 32px;
			margin: 30px auto 0;
			font-size: 16px;
		}
		.status{
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			width: 100%;
			font-size: 18px;
			background: #FFF;
			text-align: center;
			height: 46px;
			line-height: 46px;
			color: #BF4039;
			font-weight: bold;
			border-top: 1px solid rgba(191,64,57,0.3);
		}
	}
</style>
